<template>
  <div class="community-container">
    <div class="community-header">
      <h2>羽毛球交流社区</h2>
      <button @click="showPostForm = true" class="post-btn">发布新帖</button>
    </div>

    <!-- 发布新帖表单 -->
    <div class="post-modal" v-if="showPostForm">
      <div class="modal-content">
        <span class="close-btn" @click="showPostForm = false">&times;</span>
        <h3>发布新帖</h3>
        <form @submit.prevent="handlePostSubmit">
          <div class="form-group">
            <label for="postTitle">标题</label>
            <input
              type="text"
              id="postTitle"
              v-model="newPost.title"
              required
              placeholder="请输入帖子标题"
            />
          </div>
          <div class="form-group">
            <label for="postContent">内容</label>
            <textarea
              id="postContent"
              v-model="newPost.content"
              required
              placeholder="请输入帖子内容"
              rows="6"
            ></textarea>
          </div>
          <div class="form-actions">
            <button type="button" @click="showPostForm = false" class="cancel-btn">取消</button>
            <button type="submit" class="submit-btn">发布</button>
          </div>
        </form>
      </div>
    </div>

    <!-- 帖子列表 -->
    <div class="posts-list">
      <div class="post-card" v-for="post in posts" :key="post.id">
        <div class="post-header">
          <h3 class="post-title">{{ post.title }}</h3>
          <span class="post-author">发布者: {{ post.author }}</span>
        </div>
        <div class="post-meta">
          <span class="post-date">{{ formatDate(post.createdAt) }}</span>
        </div>
        <div class="post-content">{{ post.content }}</div>
      </div>
      <div class="no-posts" v-if="posts.length === 0">
        暂无帖子，快来发布第一条帖子吧！
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

const store = useStore();
const router = useRouter();
const showPostForm = ref(false);
const newPost = ref({
  title: '',
  content: ''
});

// 获取帖子列表
const posts = computed(() => [...store.getters.allCommunityPosts, ...staticPosts.value]);
const currentUser = computed(() => store.getters.currentUser);
const staticPosts = ref([{id: 1, title: '羽毛球拍选购指南', author: '羽毛球达人', content: '新手选购羽毛球拍应该注意拍面大小和重量，初学者建议选择4U重量和适中拍面的球拍', createdAt: '2025-10-01T08:30:00'}, {id: 2, title: '如何保养羽毛球鞋', author: '运动专家', content: '定期清洁鞋面，避免暴晒，存放时使用鞋撑保持形状', createdAt: '2025-10-02T10:15:00'}, {id: 3, title: '羽毛球线选择攻略', author: '羽球爱好者', content: '不同材质的羽毛球线适合不同打法，控球型选手建议使用细线，力量型选手适合粗线', createdAt: '2025-10-03T14:20:00'}, {id: 4, title: '双打战术基础', author: '教练老王', content: '双打站位很重要，前后站位适合进攻，平行站位适合防守', createdAt: '2025-10-04T09:45:00'}, {id: 5, title: '羽毛球拍缠手胶技巧', author: '装备控', content: '手胶缠绕时注意力度均匀，从拍柄底部开始向上缠绕，最后用胶带固定', createdAt: '2025-10-05T11:30:00'}, {id: 6, title: '羽毛球发球技巧详解', author: '专业教练', content: '正手发球注意抛球高度和击球点，保持动作一致性', createdAt: '2025-10-06T15:20:00'}, {id: 7, title: '如何提高杀球力量', author: '力量训练师', content: '核心力量训练是关键，配合正确的挥拍动作能有效提升杀球威力', createdAt: '2025-10-07T10:10:00'}, {id: 8, title: '羽毛球运动损伤预防', author: '运动医生', content: '充分热身，注意步法规范，避免膝盖和肩部过度劳损', createdAt: '2025-10-08T16:40:00'}, {id: 9, title: '初学者常见问题解答', author: '羽球顾问', content: '新手常见问题包括握拍姿势、击球点控制和移动步法', createdAt: '2025-10-09T13:25:00'}, {id: 10, title: '羽毛球拍磅数选择指南', author: '器材专家', content: '初学者建议22-24磅，中级选手25-27磅，高级选手28+磅', createdAt: '2025-10-10T09:15:00'}, {id: 11, title: '羽毛球战术：假动作运用', author: '战术大师', content: '合理运用假动作可以有效打乱对手节奏，创造进攻机会', createdAt: '2025-10-11T14:30:00'}, {id: 12, title: '如何选择羽毛球', author: '器材评测师', content: '天气干燥选择耐打型羽毛球，潮湿环境选择防水处理的羽毛球', createdAt: '2025-10-12T11:05:00'}, {id: 13, title: '双打配合技巧', author: '双打冠军', content: '双打关键在于沟通和默契，提前移动和补位非常重要', createdAt: '2025-10-13T15:45:00'}, {id: 14, title: '羽毛球运动后的拉伸方法', author: '康复教练', content: '运动后进行静态拉伸，重点拉伸大腿、小腿和肩部肌肉', createdAt: '2025-10-14T10:20:00'}, {id: 15, title: '羽毛球拍线更换教程', author: 'DIY达人', content: '更换拍线需要专用工具，建议新手寻求专业人士帮助', createdAt: '2023-10-15T16:30:00'}, {id: 16, title: '反手击球技巧', author: '技术指导', content: '反手击球关键在于手腕力量和提前准备姿势', createdAt: '2023-10-16T09:45:00'}, {id: 17, title: '羽毛球场地选择指南', author: '场地管理员', content: '专业场地应选择塑胶地板，避免在水泥地上长时间打球', createdAt: '2023-10-17T14:10:00'}, {id: 18, title: '儿童羽毛球拍选择', author: '青少年教练', content: '儿童应选择轻量球拍(2U以下)和合适拍柄尺寸', createdAt: '2023-10-18T11:20:00'}, {id: 19, title: '羽毛球比赛规则详解', author: '裁判老张', content: '详细介绍发球规则、违例情况和计分方式', createdAt: '2023-10-19T15:50:00'}, {id: 20, title: '羽毛球运动装备推荐', author: '装备控小李', content: '推荐几款性价比高的入门级羽毛球装备组合', createdAt: '2023-10-20T10:30:00'}]);


onMounted(() => {
  // 检查是否已登录
  if (!store.getters.isLoggedIn) {
    // 不强制登录，但发布功能需要登录
  }
});

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit'
  });
};

// 处理帖子发布
const handlePostSubmit = () => {
  if (!store.getters.isLoggedIn) {
    alert('请先登录后再发布帖子');
    router.push('/login');
    return;
  }

  if (!newPost.value.title.trim() || !newPost.value.content.trim()) {
    alert('标题和内容不能为空');
    return;
  }

  // 提交新帖
  store.dispatch('publishCommunityPost', {
    title: newPost.value.title,
    content: newPost.value.content,
    author: currentUser.value.username
  });

  // 重置表单并关闭模态框
  newPost.value = {
    title: '',
    content: ''
  };
  showPostForm.value = false;
};
</script>

<style scoped>
.community-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.community-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
}

h2 {
  color: #2196F3;
  margin: 0;
}

.post-btn {
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: transform 0.2s;
}

.post-btn:hover {
  transform: translateY(-2px);
}

/* 模态框样式 */
.post-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-content {
  background-color: white;
  padding: 2rem;
  border-radius: 12px;
  width: 100%;
  max-width: 600px;
  position: relative;
}

.close-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.5rem;
  cursor: pointer;
  color: #666;
}

h3 {
  color: #2196F3;
  margin-top: 0;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  color: #4CAF50;
  font-weight: 500;
}

input, textarea {
  width: 100%;
  padding: 0.8rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 1rem;
}

textarea {
  resize: vertical;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin-top: 2rem;
}

.cancel-btn {
  padding: 0.6rem 1.2rem;
  border: 1px solid #ddd;
  background-color: white;
  border-radius: 6px;
  cursor: pointer;
}

.submit-btn {
  padding: 0.6rem 1.2rem;
  background: linear-gradient(135deg, #4CAF50 0%, #2196F3 100%);
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* 帖子列表样式 */
.posts-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.post-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
  transition: transform 0.3s, box-shadow 0.3s;
}

.post-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.post-title {
  color: #2196F3;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.post-meta {
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}

.post-author {
  color: #4CAF50;
  font-weight: 500;
}

.post-content {
  color: #333;
  line-height: 1.6;
}

.no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
}
</style>